<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素选择器</title>
		<style>
			*{
				font-size: 14px;
				font-family: "微软雅黑";
				margin: 0;
				padding: 0;
			}
			div,p{
				border: 1px solid red;
				width: 150px;
				height: 100px;
				margin: 15px;
				text-align: center;
				line-height: 100px;
				float: left;
			}
			
			.scott-user-submit{
				margin: 15px;
				color: white;
				background-color: #ef5b00;
				height: 50px;
				line-height: 50px;
				text-align: center;
				width: 45%;
				display: block;
				cursor: pointer;
				font-size: 14px;
				font-family: "Microsoft YaHei";
				
				/*去掉边框的关键代码*/
				border: 0 none;
			}
			
			.bg{
				background-color: green;
			}
			
			.an{
				background-color: #ef5b00;
			}
		</style>
	</head>
	<body>
		
		<label style="display: block;width: 800px;margin: 10px 10px;height: auto; overflow: hidden; border: 3px green solid;">
			<div>
				刘备
			</div>
			<div>
				关羽
			</div>
			<div>
				张飞
			</div>
		</label>
		
		<label style="display: block;width: 800px;margin: 10px 10px;height: auto; overflow: hidden; border: 3px lightcoral solid; ">
			<p>
				狮子
			</p>
			<p>
				老虎
			</p>
		</label>
		
		
		
		<input class="scott-user-submit" type="button"  value="三国之人物"  id="sg" style="background-color: green;"  />
		<input class="scott-user-submit" type="button"  value="三国之动物"  id="dw" style="background-color: #ef5b00;" />
	</body>
	<!--Step1:导入jquery-->
	<script type="text/javascript" src="../../../js/jquery-1.4.1.js" ></script>
	
	<script>
		
		/*window.onload=function(){
			document.getElementById('sg').onclick=function(){
			
				var divs  = document.getElementsByTagName('div');
				
				console.log(divs.length);
				
				
				for(var index=0; index<divs.length;index++){
					
					var div  = divs[index];
					
					div.setAttribute("class","bg");
				}
			}
		}*/
		
		
		$(function(){
			$('#sg').click(function(){
				//1 找到所有的div标签的数组  divs
				var divs  = $('div');
				//2 给所有的找到的符合要求的标签增加1个class类样式
				divs.addClass('bg');	
			});
			
			
			
			
			$('#dw').click(function(){
				
				var ps= $('p');
				
				ps.addClass('an');
			});
			
		});
		
		
		
		
	</script>
</html>
